<template>
  <div id="app">
    <div id="game">
      <div class="turntable">
        <div :style="gift1" ref="gift">谢谢惠顾</div>
        <div :style="gift2" ref="gift">积分+20</div>
        <div :style="gift3" ref="gift">积分+100</div>
        <div :style="gift4" ref="gift">积分+20</div>
        <div :style="gift5" ref="gift"></div>
        <div :style="gift6" ref="gift">积分+20</div>
        <div :style="gift7" ref="gift">5元优惠券</div>
        <div :style="gift8" ref="gift">积分+20</div>
        <div :style="gift9" ref="gift">10元优惠券</div>
        <button type="button" class="start" @click="start()">我要礼物</button>
      </div>
    </div>
  </div>

</template>

<script>
import request from '@/utils/request'

export default {
  name: 'draw',
  data() {
    return {
      gifNum: 0,
      userAccount:0,
      gift1: {
        width: '100px',
        height: '100px',
        border: '1px solid yellowgreen',
        float: 'left',
        font: '14px',
        background: 'azure',
      },
      gift2: {
        width: '100px',
        height: '100px',
        border: '1px solid yellowgreen',
        float: 'left',
        font: '14px',
        background: 'azure',
      },
      gift3: {
        width: '100px',
        height: '100px',
        border: '1px solid yellowgreen',
        float: 'left',
        font: '14px',
        background: 'azure',
      },
      gift4: {
        width: '100px',
        height: '100px',
        border: '1px solid yellowgreen',
        float: 'left',
        font: '14px',
        background: 'azure',
      },
      gift5: {
        width: '100px',
        height: '100px',
        border: '1px solid yellowgreen',
        float: 'left',
        font: '14px',
        background: 'white',
      },
      gift6: {
        width: '100px',
        height: '100px',
        border: '1px solid yellowgreen',
        float: 'left',
        font: '14px',
        background: 'azure',
      },
      gift7: {
        width: '100px',
        height: '100px',
        border: '1px solid yellowgreen',
        float: 'left',
        font: '14px',
        background: 'azure',
      },
      gift8: {
        width: '100px',
        height: '100px',
        border: '1px solid yellowgreen',
        float: 'left',
        font: '14px',
        background: 'azure',
      },
      gift9: {
        width: '100px',
        height: '100px',
        border: '1px solid yellowgreen',
        float: 'left',
        font: '14px',
        background: 'azure',
      },
    }
  },
  mounted() {
  },
  methods: {
    gif(num) {
      //12369874
      let time2 = 0;
      let time3 = 0;
      let time4 = 0;
      let time5 = 0;
      let time6 = 0;
      let time7 = 0;
      let time8 = 0;
      let time1 = 0;

      this.gift1.background = 'azure';
      this.gift2.background = 'azure';
      this.gift3.background = 'azure';
      this.gift4.background = 'azure';
      this.gift6.background = 'azure';
      this.gift7.background = 'azure';
      this.gift8.background = 'azure';
      this.gift9.background = 'azure';

      if (num == 0) {
        time2 = 500;
        time3 = 1000;
        time4 = 1500;
        time5 = 2000;
        time6 = 2500;
        time7 = 3000;
        time8 = 3500;
        time1 = 4000;
        setTimeout(() => {
          alert("祝你下次好运")
        }, 4500)
      } else if (num == 1) {
        time2 = 500;
        setTimeout(() => {
          alert("积分+20");
        }, 1000)

      } else if (num == 2) {
        time2 = 500;
        time3 = 1000;
        setTimeout(() => {
          alert("积分+100");
        }, 1500)

      } else if (num == 3) {
        time2 = 500;
        time3 = 1000;
        time4 = 1500;
        setTimeout(() => {
          alert("积分+20");
        }, 2000)

      } else if (num == 4) {
        time2 = 500;
        time3 = 1000;
        time4 = 1500;
        time5 = 2000;
        setTimeout(() => {
          alert("10元优惠券");
        }, 2500)
      } else if (num == 5) {
        time2 = 500;
        time3 = 1000;
        time4 = 1500;
        time5 = 2000;
        time6 = 2500;
        setTimeout(() => {
          alert("积分+20");
        }, 3000)
      } else if (num == 6) {
        time2 = 500;
        time3 = 1000;
        time4 = 1500;
        time5 = 2000;
        time6 = 2500;
        time7 = 3000;
        setTimeout(() => {
          alert("5元优惠券");
        }, 3500)

      } else if (num == 7) {
        time2 = 500;
        time3 = 1000;
        time4 = 1500;
        time5 = 2000;
        time6 = 2500;
        time7 = 3000;
        time8 = 3500;
        setTimeout(() => {
          alert("积分+20");
        }, 4000)
      } else if(num == 8 ){
        alert("积分不足")
      }

      if(num != 8) {
        this.gift1.background = 'red';
        setTimeout(() => {
          this.gift1.background = 'azure';
          this.gift2.background = 'red';
          // 方法区
        }, time2);
        setTimeout(() => {
          this.gift2.background = 'azure';
          this.gift3.background = 'red';
          // 方法区
        }, time3);
        setTimeout(() => {
          this.gift3.background = 'azure';
          this.gift6.background = 'red';
          // 方法区
        }, time4);
        setTimeout(() => {
          this.gift6.background = 'azure';
          this.gift9.background = 'red';
          // 方法区
        }, time5);
        setTimeout(() => {
          this.gift9.background = 'azure';
          this.gift8.background = 'red';
          // 方法区
        }, time6);
        setTimeout(() => {
          this.gift8.background = 'azure';
          this.gift7.background = 'red';
          // 方法区
        }, time7);
        setTimeout(() => {
          this.gift7.background = 'azure';
          this.gift4.background = 'red';
          // 方法区
        }, time8);
        setTimeout(() => {
          this.gift4.background = 'azure';
          this.gift1.background = 'red';
          // 方法区
        }, time1);
      }


    },
    start() {
      this.getDraw();
    },
    getDraw(){
      //获取抽奖结果
      request({
        url:"/api/gaosheng/gaosheng/draw/start",
        methods: "get",
        params:{
          userAccount:this.$store.getters.getUser.userAccount
        }
      }).then((res) => {
        this.gif(res);
      })
    }
  },
  created() {

  }

}
</script>
<style>
/* #app {
  /* position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
} */ 

#game {
  width: 100%;
  height: 320px;
  text-align: center;
  margin-top: 0 auto;


}

.turntable {
  width: 310px;
  height: 320px;
  margin-top: 0 auto;
}

#gift1 {
  width: 100px;
  height: 100px;
  border: 1px solid yellowgreen;
  float: left;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  background-color: azure;
  color: cadetblue;
}

#gift2 {
  width: 100px;
  height: 100px;
  border: 1px solid yellowgreen;
  float: left;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  background-color: azure;
  color: cadetblue;
}

#gift3 {
  width: 100px;
  height: 100px;
  border: 1px solid yellowgreen;
  float: left;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  background-color: azure;
  color: cadetblue;
}

#gift4 {
  width: 100px;
  height: 100px;
  border: 1px solid yellowgreen;
  float: left;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  background-color: azure;
  color: cadetblue;
}

#gift5 {
  width: 100px;
  height: 100px;
  border: 1px solid yellowgreen;
  float: left;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  /*background-color: azure;*/
  /*color: cadetblue;*/
}

#gift6 {
  width: 100px;
  height: 100px;
  border: 1px solid yellowgreen;
  float: left;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  background-color: azure;
  color: cadetblue;
}

#gift7 {
  width: 100px;
  height: 100px;
  border: 1px solid yellowgreen;
  float: left;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  background-color: azure;
  color: cadetblue;
}

#gift8 {
  width: 100px;
  height: 100px;
  border: 1px solid yellowgreen;
  float: left;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  background-color: azure;
  color: cadetblue;
}

#gift9 {
  width: 100px;
  height: 100px;
  border: 1px solid yellowgreen;
  float: left;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  background-color: azure;
  color: cadetblue;
}

.gift:nth-child(5) {
  background-color: transparent;
}

.start {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 10px;
  vertical-align: middle;
  color: rgb(255, 255, 255);
  background-color: rgb(233, 104, 107);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 6px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  font-family: 微软雅黑;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  outline: 0px;
  padding: 8px 18px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.2s ease-out 0s;
  border-radius: 2px;
}

.selected {
  border: 1px solid transparent;
  box-shadow: 0 0 5px 2px red;
  position: relative;
  background-color: antiquewhite;
}

#gift {
  border: 1px solid transparent;
  box-shadow: 0 0 5px 2px red;
  position: relative;
  background-color: antiquewhite;
}
</style>

